<script setup lang="ts">
import { ArrowLeftBold, ArrowRight, Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { useSearchStore } from '@/stores/search'
import { storeToRefs } from 'pinia'
import { ref } from 'vue';
import axios from 'axios';
const { search } = storeToRefs(useSearchStore())
const router = useRouter();
let action = useSearchStore();
let flag = ref(false)
let arr = ref(['阿胶片', '医用口罩', '消化不良', '骨质疏松', '感冒药']);
let name = ref('')
let show = ref([])
let SSearch = async (name: string) => {
    if (name.length > 0) {
        let { data: { data } } = await axios.get('http://localhost:3000/yg/searchcommodity', { params: { name: name } })
        action.add(name)
        console.log(flag.value);
        show.value = data
        flag.value = true
    } else {
        flag.value = false
    }
}
let clic = (name: string) => {
    // console.log(name);
    SSearch(name)
    if (name === '') {
        flag.value = false
    }
}
let tj = (title: string) => {
    name.value = title
}
</script>
<template>
    <div id="search">
        <div class="top">
            <el-icon @click="router.back()">
                <ArrowLeftBold />
            </el-icon>
            <h3 style="margin: 0 auto">订单中心</h3>
        </div>
        <div class="main">
            <div class="top">
                <div style="width: 10%;text-align: center;">
                    <el-icon>
                        <Search />
                    </el-icon>
                </div>
                <input type="text" v-model="name" placeholder="请输入商品名称" style="width: 70%;height: 30px;border: none;">
                <button @click="clic(name)"
                    style="color: #00BE8C;width: 50px;height: 30px;background-color: #fff;border: none;margin-right: 10px;">搜索</button>
            </div>

            <div v-if="search.length > 0 && flag === false" class="result">
                <h3>最近搜索</h3>
                <div class="history-list">
                    <button v-for="item in search" :key="item" @click="tj(item)"
                        style="width: 100px;height: 30px;margin-right:10px;margin-top: 10px;border-radius: 10px;background-color: #fff;border: none;">{{
                            item }}</button>
                </div>
            </div>
            <div class="hisoty" v-if="flag === false">
                <h3>历史搜索</h3>
                <div class="history-list">
                    <button v-for="item in arr" :key="item" @click="tj(item)"
                        style="width: 100px;height: 30px;margin-right:10px;margin-top: 10px;border-radius: 10px;background-color: #fff;border: none;">{{
                            item }}</button>
                </div>
            </div>
            <div class="good" v-if="flag === true">
                <div class="good-list" v-for="item in show" :key="item._id">
                    <div class="left">
                        <img :src="item.img" alt="" style="width: 100%;height: 150px;">
                    </div>
                    <div class="good-info">
                        <h3>{{ item.name }}</h3>
                        <p>￥{{ item.price }}</p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>



<style scoped lang="scss">
#search {
    width: 100%;
    height: 100%;

    .top {
        width: 100%;
        height: 30px;
        background-color: #fff;
        display: flex;
        align-items: center;
    }

    .main {
        width: 100%;
        height: calc(100% - 30px);
        overflow: hidden;

        .top {
            width: 90%;
            height: 40px;
            margin: 0 auto;
            margin-top: 20px;
            border: 1px solid #ccc;
            border-radius: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        .result {
            width: 100%;
            height: 100px;

            .history-list {
                width: 100%;
                height: calc(100% - 30px);

            }
        }

        .hisoty {
            width: 100%;
            height: 100px;

            .history-list {
                width: 100%;
                height: calc(100% - 30px);

            }
        }

        .good {
            width: 100%;
            height: calc(100% - 30px);

            .good-list {
                width: 100%;
                height: 150px;
                display: flex;

                .left {
                    width: 120px;
                    height: 150px;
                }
            }
        }
    }



}
</style>